<template>
  <div class="userview">
    <h3>我的</h3>
      <div class="header">
          <div class="noUser" v-if="!isUser">
            <img src="../assets/img/loading/loadGif.gif" alt="">
            <p @click="onLogin">请登录</p>
          </div>
          <div class="user" v-else>
            <img src="../assets/img/mine/defaultImg.jpeg" alt="">
            <div class="login1">
                <div>
                  极客 {{user2.text}}
                </div>
                <div>
                  手机号：{{user2.phone}}
                </div>
            </div>
          </div>
      </div>
      <div class="main">
        <img src="../assets/img/login/1.png" alt="">
      </div>
      <div class="footer" v-if="isUser">
        <van-button type="danger" size="large" @click="onClear">退出登陆</van-button>
      </div>
  </div>
</template>

<script>
import { nextTick } from 'vue';
export default {
    name:"UserView",
    data(){
      return {
        isUser:false,
        user2:{
          text:"",
          phone:""
        },
      }
    },
    methods: {
      onLogin(){
        this.$router.push("login");
      },
      onClear(){
        localStorage.removeItem("taken");
        // localStorage.removeItem("list");
      }
    },
    created(){
      // this.user=this.$store.state.login;
      nextTick(()=>{
        if(localStorage.getItem("taken")){
          let obj = JSON.parse(localStorage.getItem("taken"))
          this.user2=obj
          this.isUser=true;
        console.log(this.user2);
        }
      })
    },
    mounted(){
      // this.login=this.$store.state.login;
      // console.log(this.login);
    },
}
</script>

<style lang="scss">
  .userview{
    font-size:.16rem;
    background:#f1f1f1;
    h3{
      text-align:center;
      font-size:.4rem;
      margin:0;
      line-height: 0.6rem;
      background:#fff;
    }
    .header{
      width: 100%;
      height: 2.5rem;
      background:#ccc;
      .noUser{
        display:flex;;
        background:#fff;
        font-size: 0.5rem;
        padding-left:.3rem;
        height: 2.5rem;
        align-items: center;
        img{
          width: 1.5rem;
          height: 1.5rem;
        }
      }
      .user{
        display:flex;;
        background:green;
        font-size: 0.3rem;
        padding-left:.3rem;
        color:#fff;
        height: 2.5rem;
        align-items: center;
        img{
          width: 1.5rem;
          height: 1.5rem;
          border-radius:50%;
          margin-right:.3rem;
        }
        .login1{
          width: 80%;
        }
      }
    }
    .main{
      width: 100vw;
      height: 8rem;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
</style>